<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>告警框例子</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      <!--
        加一层后，组件显示变形
        要避免这个问题
        1）将触发事件按钮全局的强窗分成二个组件编写，保证全局弹窗组件挂载在body标签下
        2）使用Teleport (推荐)
      -->
      <div style="position: absolute; width: 50px;">
        <my-alert></my-alert>
      </div>
    </div>
  </body>

  <script>
    const App = Vue.createApp({})
    App.component("my-alert",{
      template:`
        <div>
          <button @click="show = true">弹出弹窗</button>
        </div>
        <teleport to="body">
        <div v-if="show" style="text-align:center; padding:20px; position:absolute;top:45%; left:30%; width:40%; border:black solid 2px; background-color:white">
          <h3>弹窗</h3>
          <button @click="show=false">隐藏弹窗</button>
        </div>
        </teleport>
      `,
      data(){
        return {
          show:false
        }
      }
    })
    App.mount("#Application")
  </script>

</html>